<template>
	<div id="app">
		
		<!--<div class="bg-xingzhuang"></div>-->
 
    <div class="act-des over-hid">
        <div class="img" @click="goOver">
            <img src="../../../assets/images/tmp/main_banner.png" alt="">
            <!--<div class="yaoyiyao-hu"></div>-->
        </div>
                <!--摇一摇组件-->
        <wii-shake :conf="shake" id="J_Yao" class="mt30" :class="{hide:yiyComponent}" @click="goJieS"></wii-shake>      
        <!--<!--摇一摇页面刚进来时圆环的样子-->
        <!--<div class="index-phone m-center mt50 mb20 ">
            <div class="red-ring" id="redRing"></div>
           <div class="hand-phone" :class="{handcircle:isHandcircle}"></div>
        </div> -->
        
        <!--摇过后圆环的样子-->
        <div id="J_NoReward" class="no-content-circle m-center mt50 mb20 " :class="{hide:afterYiy}">
            <div class="bengkui-div">
                <div class="bengkui m-center"></div>
            </div>
 
            <div  class="J_NoRewardMsg"  >
                <!--<p class="p1 mt20">很遗憾，未中奖</p>
                <p class="p2">再接再厉</p> -->
            </div>
           <!--摇奖次数用完了-->
            <!--<div class="J_NoRewardMsg" :class="{hide:chanllengesOver}" >
                <p class="p1 mt20">摇奖次数用完了</p>
                <p class="p2">邀请好友，或者</p>
                <p class="p2">明天再来吧</p>                
            </div>-->
            <div class="red-ring"></div>
        </div>
    </div>
    
    <div class="page-bottom" @click="goJieS">
        <div class="yao-tip m-center">
            <span class="fl">请用力<span class="yaoyiyao">摇一摇</span>手机</span>
            <span class="fr" >剩余<span class="num" id="surplus_play_times"></span>次</span>
        </div>
        <!--<div class="wave"></div>-->
    </div>

    <!-- 外链弹层 -->
    <div id="J_YaoSuccess" class="pop-wrapper" :class="{hide:outReachLayer}">
        <div class="wailian-pop">
            <div class="pop-close-btn">
                <div class="close-btn m-center mt28"></div>
            </div>
            <div class="gift m-center"></div>
            <p class="p1 mt40">恭喜您摇到</p>
            <p class="p2 m-center mt50  J_title">致敬黑曼巴东风悦达起亚
KX5豪礼送不停</p>
            <a class="btn m-center mt50 goBtn J_url" @click="goZhongJ">前去领取</a>
        </div>
    </div>
    <!-- 中奖弹层 -->
    <div id="J_AwardSuccess" class="pop-wrapper" :class="{hide:winLayer}">
        <div class="zhongjiang-pop">
            <div class="pop-close-btn">
                <div class="close-btn m-center mt28"></div>
            </div>

    <section class="giftBox-top">
        <div class="star1"><img src="../../../assets/images/01xx.png"></div>
        <div class="star2"><img src="../../../assets/images/01xx.png"></div>
        <div class="star3"><img src="../../../assets/images/02xx.png"></div>
        <div class="star4"><img src="../../../assets/images/02xx.png"></div>
        <div class="star-box"><img src="../../../assets/images/hz.png"></div>
    </section>
    <section class="giftBox-mh"></section>
            <div class="img mt20 J_img">
                <img src="../../../assets/images/tmp/main_banner.png">
            </div>
            <p class="p1 mt20">恭喜您摇到</p>
            <p class="p2 m-center mt16 J_title">致敬黑曼巴东风悦达起亚
KX5豪礼送不停</p>
            <a class="btn m-center awardBtn mt20 J_url" @click="goShake">立即领取</a>
        </div>
     </div>
	</div>
</template>

<script>
	import 'assets/js/wii_entry';
	import 'assets/js/common'
	export default {
  data() {
    return {
      isHandcircle:false,
      actId:'',
      isDrawEnd:'',   //次数是否用完
      drawType:'',
      shake:{
        isShake: true,   //为true的时候 摇动生效  
        url: 'http://beta.yao.wii.qq.com/h5/act/draw'+ '?_' + new Date().getTime(),   //请求的路径需要配置
        params:{
          act_id: ''    //
        },
        callback: function(data){
//      alert(data.status)
        if(data.status == 0){
        	var a = 0
        	var $CONFIG=1
        	 alert($CONFIG)
        	 if (a == 0) {
        	 	alert(a)
            switch (data.status) {
                case 0: // 抽奖次数已用完
                    this.isDrawEnd = 1;
                    var noAwardMsg = '<p class="p1 mt20">摇奖次数用完了</p>';
                    if ($CONFIG) {
                        noAwardMsg += '<p class="p2">邀请好友，或者</p>';
                    }
                    noAwardMsg += '<p class="p2">明天再来吧</p>';

                    $("#J_Yao").hide();
                    $("#J_NoReward").show();
//                  alert(noAwardMsg)
                    alert($("#J_NoReward").find(".J_NoRewardMsg"))
                    $("#J_NoReward").find(".J_NoRewardMsg").html(noAwardMsg);
                    $("#surplus_play_times").text(0);

                    //TODO  分享好友按钮没有了
                    //$('.J_share').show();
                    alert(666)
                    alert(this.shake.isShake)
                     alert(999)
//                  this.shake.isShake = false
//                  GLOBAL.yaoFlag = t;
                    break;
                default:
                    GLOBAL.pop("摇动失败");
                    break;
            }

            GLOBAL.ajaxRequesting = false;
            return;
        }
         $("#surplus_play_times").text(data.data.surplus_play_times);
                // data.data.award_type 中奖类型 0：未中奖；1：中奖；2：外链
                if (data.data.award_type === 0) {
                    var noAwardMsg = '<p class="p1 mt20">很遗憾，未中奖</p>';
                    noAwardMsg += '<p class="p2">再接再厉</p>';

                    $("#J_Yao").hide();
                    $("#J_NoReward").find(".J_NoRewardMsg").html(noAwardMsg);
                    $("#J_NoReward").show();


                    //$(".J_Draw").show();
//                  GLOBAL.yaoFlag = true;
                    this.shake.isShake = true
                    //3秒后自动可以摇
                    setTimeout(function () {
                        //如果当前处于可以摇奖的情况，则继续摇奖
                        if (isDrawEnd != 1) {
//                          GLOBAL.yaoFlag = false;
                             this.shake.isShake = false ;
                            $("#J_Yao").show();
                            $("#J_NoReward").hide();
                        }
                    }, 3000);
                } else if (data.data.award_type === 1) {
//                  GLOBAL.yaoFlag = true;
                    this.shake.isShake = true
                    $("#J_AwardSuccess").show();
                    $("#J_AwardSuccess").find(".J_img").attr("src", data.data.award_img);
                    $("#J_AwardSuccess").find(".J_title").html(data.data.award.FAwardName);
                    $("#J_AwardSuccess").find(".J_url").attr('href', data.data.award_url);


                } else if (data.data.award_type === 2) {
//                  GLOBAL.yaoFlag = true;
                    this.shake.isShake = true
                    $("#J_YaoSuccess").show();
                    $("#J_YaoSuccess").find(".J_title").html(data.data.non_award.FLinkTitle);
                    $("#J_YaoSuccess").find(".J_url").attr('href', data.data.non_award.FLinkUrl);
                }
        	
        	
        }
        
       
        }
      },
    yiyComponent:false, //摇动组件
    afterYiy:true,     //摇奖结束外圆环       与 没有中奖或者 摇奖次数用完了连用
    notWilling:true,     //没用中奖界面     
    chanllengesOver:true,  //摇奖次数用完了
    winLayer:true,   // false中奖弹层 显示
    outReachLayer:true   //flase外联弹层 显示
    }
    
  },
  created() {
    this.handYaoActive();
    
    
  },
  watch: {

  },
  computed: {
    
  },
   beforeMount: function() { 
   	
      
   },
  mounted() {
  	  GLOBAL.yaoFlag =this.shake.isShake 
  	  GLOBAL.ajaxRequesting = false;
	  this.shake.callback();
  	  
      let redRing=$('.red-ring');
      let redRingAngle=0;
       setInterval(()=>{
        redRingAngle =redRingAngle+22.5;
        redRing.animate({'rotate': redRingAngle+'deg'}, 0);
    },300);
    
    $(".pop-close-btn").click(function () {
        $(this).parent().parent().hide();
        this.shake.isShake = false;
    });
    
    //刚一进来的时候判断一下状态  
   if (this.isDrawEnd === 1) {
        GLOBAL.yaoFlag = true;

        var noAwardMsg = '<p class="p1 mt20">摇奖次数用完了</p>';
        if (this.drawType == 1) {
            noAwardMsg += '<p class="p2">邀请好友，或者</p>';
            noAwardMsg += '<p class="p2">明天再来吧</p>';
        } else {
            noAwardMsg += '<p class="p2">邀请好友来玩吧！</p>';
        }

        $("#J_Yao").hide();
        $("#J_NoReward").show();
        $("#J_NoReward").find(".J_NoRewardMsg").html(noAwardMsg);
        $("#surplus_play_times").text(0);
    }
   
  },
  methods: {
  
	handYaoActive(){     // 摇动的函数
		setTimeout(()=>{
			setInterval(()=>{
				this.isHandcircle ? this.isHandcircle = false : this.isHandcircle = true;
			},600)
		},200)
	},
	goZhongJ(){
	this.yiyComponent=false; //摇动组件
    this.afterYiy=true,     //摇奖结束外圆环       与 没有中奖或者 摇奖次数用完了连用
    this.notWilling=true,     //没用中奖界面     
    this.chanllengesOver=true,  //摇奖次数用完了
    this.winLayer=false,   // false中奖弹层 显示
    this.outReachLayer=true   //flase外联弹层 显示
	},
	goShake(){
	this.yiyComponent=false; //摇动组件
    this.afterYiy=true,     //摇奖结束外圆环       与 没有中奖或者 摇奖次数用完了连用
    this.notWilling=true,     //没用中奖界面     
    this.chanllengesOver=true,  //摇奖次数用完了
    this.winLayer=true,   // false中奖弹层 显示
    this.outReachLayer=true   //flase外联弹层 显示
	},
	goJieS(){
		this.yiyComponent=true; //摇动组件
       this.afterYiy=false,     //摇奖结束外圆环       与 没有中奖或者 摇奖次数用完了连用
      this.notWilling=false,     //没用中奖界面     
    this.chanllengesOver=true,  //摇奖次数用完了
    this.winLayer=true,   // false中奖弹层 显示
    this.outReachLayer=true   //flase外联弹层 显示
	},
	goOver(){
		this.yiyComponent=true; //摇动组件
       this.afterYiy=false,     //摇奖结束外圆环       与 没有中奖或者 摇奖次数用完了连用
      this.notWilling=true,     //没用中奖界面     
    this.chanllengesOver=false,  //摇奖次数用完了
    this.winLayer=true,   // false中奖弹层 显示
    this.outReachLayer=true   //flase外联弹层 显示
	}
  }
}
</script>

<style lang="less">
	@import "../../../assets/css/main.css";
	@import "../../../assets/css/show_congratulation.css";
	.my-list{
    width: 100%;
  }
</style>